<template>
    <div class="fold-bar " :class="{'col-bar':isFold}">
        <img class="collapse" :class="{'fixed': position=='fixed'}" src="@/assets/images/collapse.png" v-if="isFold && visible" @click="toogle" />
        <img class="expanded" src="@/assets/images/expanded.png" v-if="!isFold && visible" @click="toogle" />
    </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
    name: 'FoldBar',
    computed: {
        ...mapState({
            isFold: (state) => state.app.isFold,
        }),
    },
    watch: {
        isFold(val) {
            const self = this
            this.visible = false
            setTimeout(function () {
                self.visible = true
            }, 300)
        },
    },
    data() {
        return {
            visible: true,
        }
    },
    props: {
        /**
         * fixed:折叠时按钮收回当前内容区域内部
         * */
        position: {
            // fixed
            type: String,
            default: null,
        },
    },
    created() {},
    methods: {
        toogle() {
            this.$store.commit('app/TOGGLE_FOLD')
        },
    },
}
</script>
<style lang="scss" scoped>
.fold-bar {
    position: relative;
    width: 100%;
    height: 15px;
}
.col-bar {
    width: 100%;
}
.fold-bar img {
    width: 37px;
    height: 20px;
    position: absolute;
    left: 48%;
    z-index: 3;
}
/*.collapse {
    top: -10px;
}*/
.expanded {
    top: -5%;
    right: 3px;
}
.fixed {
    right: -10px;
}
</style>
